<template>
  <div class="maincss" style="background: #4a515b">
    <div class="user-mess">
      <div class="cell-text">
        <div class="user-name">
          <div style="text-align:left; color: #fbfff6">
            <span>{{ title }}</span></div>
          <div class="other-texts column-2 margin-top-15" v-if="!disabled">
            <div class="list" style="color: #fbfff6"><span>创建人：</span>{{ form.createBy }}</div>
            <div class="list" style="color: #fbfff6"><span>创建时间：</span>{{ form.createTime }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-row>
      <el-card>
        <p class="cell-title">基础信息</p>
        <div class="other-texts column-4 margin-top-15">
          <div class="list" style="color: #000000"><span>质控品名称：</span>
            <el-select v-model="form.materialId" :disabled="disabled" @change="handleChangeProject" placeholder="请选择">
              <el-option
                v-for="item in qualityOptions"
                :key="item.id"
                :label="item.materialName"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="list" style="color: #000000"><span>生产厂家：</span>
            <el-input v-model="form.manufacturer" :disabled="disabled"/>
          </div>
          <div class="list" style="color: #000000"><span>当前在用批号：</span>
            <el-input v-model="form.batchNo" :disabled="disabled"/>
          </div>
          <div class="list" style="color: #000000"><span>生产日期：</span>
            <el-date-picker
              :disabled="disabled"
              v-model="form.productDate"
              type="date"
              placeholder="选择生产日期"
            />
          </div>
          <div class="list" style="color: #000000"><span>失效日期：</span>
            <el-date-picker
              :disabled="disabled"
              v-model="form.loseDate"
              type="date"
              placeholder="选择失效日期"
            />
          </div>
          <div class="list" style="color: #000000"><span>所属科室：</span>
            <treeselect v-model="form.deptId"
                        :disabled="disabled"
                        :options="deptOptions"
                        @select="handleNodeClick"
                        :show-count="true"
                        placeholder="请选择所在科室"/>
          </div>
        </div>
      </el-card>
      <el-card>
        <el-tabs v-model="activeTab">
          <el-tab-pane label="规则设置" name="setRules">
            <el-table :data="form.itemList" style="width: 100%" border>
              <el-table-column label="项目名称" align="center" prop="projectName" width="150"/>
              <el-table-column label="12s" align="center" prop="rule1" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.keyOne" :disabled="disabled" placeholder="请选择">
                    <el-option
                      v-for="item in typeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="13s" align="center" prop="keyTwo">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.keyTwo" :disabled="disabled" placeholder="请选择">
                    <el-option
                      v-for="item in typeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="22s" align="center" prop="keyThree">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.keyThree" :disabled="disabled" placeholder="请选择">
                    <el-option
                      v-for="item in typeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="R4s" align="center" prop="keyFour">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.keyFour" :disabled="disabled" placeholder="请选择">
                    <el-option
                      v-for="item in typeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="41s" align="center" prop="keyFive">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.keyFive" :disabled="disabled" placeholder="请选择">
                    <el-option
                      v-for="item in typeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="10x" align="center" prop="keySix">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.keySix" :disabled="disabled" placeholder="请选择">
                    <el-option
                      v-for="item in typeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="设定均值SD" name="setMeanValue">
            <el-table :data="this.form.itemList" style="width: 100%" border>
              <el-table-column label="项目名称" width="70" prop="projectName"/>
              <el-table-column prop="qualityNum" label="初始数据点" width="70">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.qualityNum" :disabled="disabled"/>
                </template>
              </el-table-column>
              <el-table-column prop="dateRange" label="统计时间范围" width="200" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-date-picker
                    :disabled="disabled"
                    v-model="scope.row.dateRange"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"/>
                </template>
              </el-table-column>
              <el-table-column prop="levelNoe" label="水平1均值" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-input-number
                    :disabled="disabled"
                    v-model="scope.row.levelNoe"
                    :min="0"
                    :precision="2"
                    :step="0.1"/>
                </template>
              </el-table-column>
              <el-table-column prop="levelTwo" label="水平1SD" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-input-number
                    :disabled="disabled"
                    v-model="scope.row.levelTwo"
                    :precision="2"
                    :min="0"
                    :step="0.1"/>
                </template>
              </el-table-column>
              <el-table-column prop="levelThree" label="水平1CV" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-input-number
                    :disabled="disabled"
                    v-model="scope.row.levelThree"
                    :precision="2"
                    :min="0"
                    :step="0.1"/>
                </template>
              </el-table-column>
              <el-table-column prop="levelFour" label="水平2均值" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-input-number
                    :disabled="disabled"
                    v-model="scope.row.levelFour"
                    :precision="2"
                    :min="0"
                    :step="0.1"/>
                </template>
              </el-table-column>
              <el-table-column prop="levelFive" label="水平2SD" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-input-number
                    :disabled="disabled"
                    v-model="scope.row.levelFive"
                    :precision="2"
                    :min="0"
                    :step="0.1"/>
                </template>
              </el-table-column>
              <el-table-column prop="levelSix" label="水平2CV" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.levelSix"
                    :disabled="disabled"
                    :min="0"
                    :precision="2"
                    :step="0.1"/>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="水平开关" name="levelSwitch">
            <el-table :data="form.itemList" style="width: 30%" border>
              <el-table-column prop="projectName" label="项目名称"  v-model="form.projectName"/>
              <el-table-column prop="switchOne" label="水平1">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.switchOne" :disabled="disabled"  width="55" />
                </template>
              </el-table-column>
              <el-table-column prop="switchTwo" label="水平2">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.switchTwo" :disabled="disabled"  width="55" />
                </template>
              </el-table-column>
              <el-table-column prop="switchThree" label="水平3"  >
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.switchThree" :disabled="disabled" width="55" />
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="小数点位数" name="decimalPlaces">
            <el-table :data="form.itemList" border style="width: 100%">
              <el-table-column prop="projectName" label="项目名称" width="180"/>
              <el-table-column prop="pointOne" label="水平1" width="100">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.pointOne" :disabled="disabled" placeholder="请选择">
                    <el-option
                      v-for="item in pointList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="pointTwo" label="水平2" width="100">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.pointTwo" :disabled="disabled" placeholder="请选择">
                    <el-option
                      v-for="item in pointList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="pointThree" label="水平3" width="100">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.pointThree" :disabled="disabled" placeholder="请选择">
                    <el-option
                      v-for="item in pointList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-row>
    <div class="details-foot">
      <div class="cell-btn">
        <el-button type="primary" @click.native="onSubmit" v-if="!disabled">提交</el-button>
        <el-button @click.native="handleClose">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import setRules from './setRules.vue'
import levelSwitch from './levelSwitch.vue'
import setMeanValue from './setMeanValue.vue'
import decimalPlaces from './decimalPlaces.vue'
import {treeselect} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listMaterial} from "@/api/business/material"
import {parseTime} from '@/utils/ruoyi'
import {addQualityRules, updateQualityRules} from "@/api/business/qualityRules"

export default {
  name: 'qualityRuleDetail',
  components: {setRules, levelSwitch, setMeanValue, decimalPlaces, Treeselect},
  data() {
    return {
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      qualityOptions: [],
      quality: '',
      activeTab: "setRules",
      typeList: [
        {
          value: '1',
          label: '不启用'
        },
        {
          value: '2',
          label: '警告'
        },
        {
          value: '3',
          label: '失控'
        }
      ],
      pointList: [
        {
          value: '1',
          label: '1'
        },
        {
          value: '2',
          label: '2'
        },
        {
          value: '3',
          label: '3'
        }
      ],
      form: {
        id: null,
        createBy: '',
        createTime: '',
        materialId: '',
        materialNo: '',
        materialName: '',
        batchNo: '',
        manufacturer: '',
        loseDate: '',
        productDate: '',
        deptId: 100,
        deptName: '湖南省人民医院',
        itemList: [
          {
            ruleId: '',
            projectName: 'CRP',
            keyOne: '1',
            keyTwo: '1',
            keyThree: '1',
            keyFour: '1',
            keyFive: '1',
            keySix: '1',
            qualityNum: '20',
            dateRange: [],
            startTime: '',
            endTime: '',
            levelNoe: '0',
            levelTwo: '0',
            levelThree: '0',
            levelFour: '0',
            levelFive: '0',
            levelSix: '0',
            switchOne: true,
            switchTwo: true,
            switchThree: true,
            pointOne: '1',
            pointTwo: '1',
            pointThree: '1'
          },
          {
            ruleId: '',
            projectName: 'SAA',
            keyOne: '1',
            keyTwo: '1',
            keyThree: '1',
            keyFour: '1',
            keyFive: '1',
            keySix: '1',
            qualityNum: '20',
            startTime: '',
            endTime: '',
            levelNoe: '0',
            levelTwo: '0',
            levelThree: '0',
            levelFour: '0',
            levelFive: '0',
            levelSix: '0',
            switchOne: true,
            switchTwo: true,
            switchThree: true,
            pointOne: '1',
            pointTwo: '1',
            pointThree: '1'
          }
        ]
      }
    }
  },
  watch: {},
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '新增'
    }
  },
  created() {
    this.$nextTick(() => {
      this.getTreeselect();
      this.handGetQualityData()
    })
  },
  methods: {
    onSubmit() {
      if (this.form.loseDate) {
        this.form.loseDate = parseTime(this.form.loseDate)
      }
      if (this.form.productDate) {
        this.form.productDate = parseTime(this.form.productDate)
      }
      if (this.form.itemList) {
        this.form.itemList.forEach((item) => {
          if (item.dateRange) {
            item.startTime = parseTime(item.dateRange[0])
            item.endTime = parseTime(item.dateRange[1])
          }
        })
      }
      if (this.form.id) {
        updateQualityRules(this.form).then((res) => {
          this.$message.success('操作成功')
          this.handleClose()
        })
      } else {
        addQualityRules(this.form).then((res) => {
          this.$message.success('操作成功')
          this.handleClose()
        })
      }
    },
    handGetQualityData() {
      listMaterial({
        pageNum: 1,
        pageSize: 100,
        type: 1
      }).then((res) => {
        this.qualityOptions = res.rows
      })
    },
    handleData(obj, item) {
      this.form = obj;
      this.activeTab = "setRules"
      this.form.itemList = item
      if (this.form.itemList) {
        this.form.itemList.forEach((item) => {
          item.dateRange = [item.startTime, item.endTime]
          if (item.switchOne == 'true') {
            item.switchOne = true
          } else {
            item.switchOne = false
          }
          if (item.switchTwo == 'true') {
            item.switchTwo = true
          } else {
            item.switchTwo = false
          }
          if (item.switchThree == 'true') {
            item.switchThree = true
          } else {
            item.switchThree = false
          }
        })
      }
    },
    handleChangeProject() {
      this.form.materialNo = this.qualityOptions.filter(x => x.id == this.form.materialId)[0].materialNo
      this.form.materialName = this.qualityOptions.filter(x => x.id == this.form.materialId)[0].materialName
    },
    handleNodeClick(data) {
      this.form.deptName = data.label
    },
    handleClose() {
      this.form = {}
      this.$emit('close', false)
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    }
  }
}
</script>
